<template>
	<view class="attendance-page">
		<view class="attendance-page-head">
			<view class="attendance-page-head-circle">{{user.name}}</view>
			<view class="attendance-page-head-text">
				<view class="attendance-page-head-text-username">{{user.name}}</view>
				<view class="attendance-page-head-text-group">
					未加入考勤组
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
			
		</view>
		<view>
			<uni-card title="考勤时间"  >
				<text>上下班时间：周一、周二、周三、周四、周五</text><br>
				<text>班次：默认班次：09:00-18:00</text>
			</uni-card>
			<uni-card title="打卡方式"  >
				<text>打卡地址：北京市昌平区南口镇南大街21号</text><br>
				<text>打卡范围：100米以内</text>
			</uni-card>
			<uni-card title="加班规则"  >
				<text>工作日：需审批，按审批单核算加班时长</text><br>
				<text>休息日：需审批，按审批单核算加班时长</text><br>
				<text>节假日：需审批，按审批单核算加班时长</text>
			</uni-card>
			<uni-card title="补卡规则"  >
				<text>补卡次数：每个月最多可提交8次</text><br>
				<text>补卡时间：最多可申请22个工作日内的补卡</text>
			</uni-card>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {name:'牛马打工人'},
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.attendance-page {
		display: flex;
		flex-direction: column;

		.attendance-page-head {
			height: 160rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-left: 38rpx;

			.attendance-page-head-circle {
				height: 100rpx;
				width: 100rpx;
				border-radius: 50%;
				background-color: rgb(0, 157, 254);
				color: #FFFFFF;
				text-align: center;
				line-height: 100rpx;
				font-size: 24rpx;

			}

			.attendance-page-head-text {
				margin-left: 30rpx;
				font-size: 38rpx;
				display: flex;
				flex-direction: column;
			}
			.attendance-page-head-text-group{
				font-size: 28rpx;
				color: #3C3E49;
			}
		}

		.attendance-page-body {
			.attendance-page-body-collapse {
				.attendance-page-body-collapse-item {
					
					.attendance-page-body-collapse-item-title {
						font-size: 36rpx;
						margin-top:-38rpx;
						margin-bottom:5rpx;
					}

					.attendance-page-body-collapse-item-text {
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
